<!DOCTYPE html>
<html lang="en" ng-app="messageApp">
<head>
    <meta charset="UTF-8">
    <title>Topics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="web-resource/lib/bootstrap/css/bootstrap.min.css">
    <script src="web-resource/lib/jquery/jquery1.11.3.min.js"></script>
    <script src="web-resource/lib/bootstrap/js/bootstrap.js"></script>
    <script src="web-resource/lib/angular/angular.min.js"></script>
    <script src="web-resource/lib/validator/validator.min.js"></script>
    <script src="web-resource/lib/pagination/tm.pagination.js"></script>
    <!--ui-notification-->
    <link rel="stylesheet" href="web-resource/lib/notification/angular-ui-notification.css">
    <script src="web-resource/lib/notification/angular-ui-notification.js"></script>
    <!--ui-notification-->


    <!--chosen-->
    <script src="web-resource/lib/chosen/angular-chosen.js"></script>
    <link rel="stylesheet" type="text/css" href="web-resource/lib/chosen/chosen.css"/>
    <link rel="stylesheet" type="text/css" href="web-resource/lib/chosen/chosen-spinner.css"/>
    <script src="web-resource/lib/chosen/chosen.jquery.min.js"></script>

    <!--chosen-->

    <!-- datetime-picker:js -->
    <link rel="stylesheet"
          href="web-resource/lib/datatimepicker/bootstrap-datetimepicker.min.css">
    <script src="web-resource/lib/datatimepicker/moment.min.js"></script>
    <script src="web-resource/lib/datatimepicker/bootstrap-datetimepicker.min.js"></script>
    <!-- endinject -->
    <script src="web-resource/lib/datatimepicker/angular-eonasdan-datetimepicker.min.js"></script>
    <!-- datetime-picker:js -->
    <!--<link rel="stylesheet" href="web-resource/css/common.css">-->

    <!--ngDialog-->
    <link rel="stylesheet" href="web-resource/lib/ng-dialog/ngDialog.min.css">
    <link rel="stylesheet" href="web-resource/lib/ng-dialog/ngDialog-theme-default.css">
    <script src="web-resource/lib/ng-dialog/ngDialog.min.js"></script>
    <!--ngDialog-->

    <!--md-tab-->
    <script src='web-resource/lib/angular-material/angular-animate.min.js'></script>
    <script src='web-resource/lib/md-tab/angular-route.min.js'></script>
    <script src='web-resource/lib/angular-material/angular-aria.min.js'></script>
    <script src='web-resource/lib/md-tab/angular-messages.min.js'></script>
    <script src='web-resource/lib/md-tab/svg-assets-cache.js'></script>
    <script src='web-resource/lib/angular-material/angular-material.min.js'></script>

    <link rel='stylesheet' href='web-resource/lib/angular-material/angular-material.min.css'>
    <link rel='stylesheet' href='web-resource/lib/md-tab/docs.css'>
    <!--md-tab-->
</head>
<body>
<ng-include src="'web-resource/template/header.tpl'"></ng-include>

<div class="container-fluid" id="deployHistoryList" ng-controller="messageController">
    <div class="modal-body">
        <div ng-cloak="" class="tabsdemoDynamicHeight" ng-app="MyApp">
            <md-content>
                <md-tabs md-dynamic-height="" md-border-bottom="">
                    <md-tab label="Topic查询">
                        <md-content class="md-padding" style="min-height:600px">
                            <h5 class="md-display-5">需要优化，目前无法分页去查，选定时间段消息太多，查询很慢，大家自行评估,多于2000条数据只返回部分(时间区间不准确！)</h5>
                            <div class="row">
                                <form class="form-inline pull-left col-sm-12">
                                    <div class="form-group">
                                        <label>Topic:</label>
                                    </div>
                                    <div class="form-group ">
                                        <div style="width: 300px">
                                            <select name="mySelectTopic" chosen
                                                    ng-model="selectedTopic"
                                                    ng-options="item for item in allTopicList"
                                                    required>
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label>Start:</label>
                                        <div class="input-group">
                                            <input class="form-control" datetimepicker ng-model="timepickerBegin"
                                                   options="timepickerOptions"/>
                                            <span class="input-group-addon"><span
                                                    class="glyphicon glyphicon-calendar"></span></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>End:</label>
                                        <div class="input-group">
                                            <input class="form-control" datetimepicker ng-model="timepickerEnd"
                                                   options="timepickerOptions"/>
                                            <span class="input-group-addon"><span
                                                    class="glyphicon glyphicon-calendar"></span></span>
                                        </div>
                                    </div>
                                    <button id="searchAppsButton" type="button" class="btn btn-sm  btn-primary"
                                            data-toggle="modal"
                                            ng-click="queryMessageByTopic()">
                                        <span class="glyphicon glyphicon-search"></span>search
                                    </button>
                                </form>
                                <table class="table table-bordered">
                                    <tr>
                                        <th class="text-center">Message ID</th>
                                        <th class="text-center">Tag</th>
                                        <th class="text-center">Key</th>
                                        <th class="text-center">Storetime</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                    <tr ng-repeat="item in messageShowList">
                                        <td class="text-center">{{item.msgId}}</td>
                                        <td class="text-center">{{item.properties.TAGS}}</td>
                                        <td class="text-center">{{item.properties.KEYS}}</td>
                                        <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-sm btn-primary" type="button"
                                                    ng-click="queryMessageByBrokerAndOffset(item.storeHost,item.commitLogOffset)">消息详情
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                                <tm-pagination conf="paginationConf"></tm-pagination>
                        </md-content>
                    </md-tab>
                    <md-tab label="Message Key查询">
                        <md-content class="md-padding" style="min-height:600px">
                            <h5 class="md-display-5">Key是指发送消息时，设置到消息对象中的Key字段。限制：一个Key查询出的结果集合不超过64条</h5>

                            <form class="form-inline pull-left col-sm-12">
                                <div class="form-group">
                                    <label>Topic:</label>
                                </div>
                                <div class="form-group">
                                    <div style="width: 300px">
                                        <select name="mySelectTopic" chosen
                                                ng-model="selectedTopic"
                                                ng-options="item for item in allTopicList"
                                                required>
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Key:</label>
                                    <input class="form-control" style="width: 450px" type="text" ng-model="key" required/>
                                </div>

                                <button type="button" class="btn btn-sm  btn-primary" data-toggle="modal"
                                        ng-click="queryMessageByTopicAndKey()">
                                    <span class="glyphicon glyphicon-search"></span>search
                                </button>
                            </form>
                            <table class="table table-bordered">
                                <tr>
                                    <th class="text-center">Message ID</th>
                                    <th class="text-center">Tag</th>
                                    <th class="text-center">Key</th>
                                    <th class="text-center">Storetime</th>
                                    <th class="text-center">操作</th>
                                </tr>
                                <tr ng-repeat="item in queryMessageByTopicAndKeyResult">
                                    <td class="text-center">{{item.msgId}}</td>
                                    <td class="text-center">{{item.properties.TAGS}}</td>
                                    <td class="text-center">{{item.properties.KEYS}}</td>
                                    <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-primary" type="button"
                                                ng-click="queryMessageByBrokerAndOffset(item.storeHost,item.commitLogOffset)">消息详情
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </md-content>
                    </md-tab>
                    <md-tab label="Message ID查询">
                        <h5 class="md-display-5">if you producer client version>=v3.5.8,you should use offsetMessageId,not messageId!!</h5>
                        <md-content class="md-padding" style="min-height:600px">
                            <form class="form-inline pull-left col-sm-12">
                                <!--<div class="form-group">-->
                                    <!--<label>Topic:</label>-->
                                <!--</div>-->
                                <!--<div class="form-group">-->
                                    <!--<div style="width: 300px">-->
                                        <!--<select name="mySelectTopic" chosen-->
                                                <!--ng-model="selectedTopic"-->
                                                <!--ng-options="item for item in allTopicList"-->
                                                <!--required>-->
                                            <!--<option value=""></option>-->
                                        <!--</select>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <label>MessageId:</label>
                                <input class="form-control" style="width: 450px" type="text" ng-model="messageId"
                                       required/>
                                <button type="button" class="btn btn-sm  btn-primary" data-toggle="modal"
                                        ng-click="queryMessageByMessageId(messageId)">
                                    <span class="glyphicon glyphicon-search"></span>search
                                </button>
                            </form>
                        </md-content>
                    </md-tab>
                </md-tabs>
            </md-content>
        </div>

    </div>
</div>
</body>

<script src="web-resource/js/message.js?timestamp=3"></script>

<script type="text/ng-template" id="messageDetailViewDialog">
    <md-content class="md-padding">
        <div>
            <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
                <div class="form-group">
                    <label class="control-label col-sm-2">Message ID:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.msgId}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Topic:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.topic}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Tag:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.properties.TAGS}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Key:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.properties.KEYS}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Storetime:</label>
                    <div class="col-sm-10">
                        <label class="form-control">{{ngDialogData.messageView.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">Message body:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control"
                                  ng-model="ngDialogData.messageView.messageBody"
                                  style="min-height:200px; resize: none"
                                  readonly></textarea>
                    </div>
                </div>
            </form>
        </div>
        <label>messageTrackList:</label>
        <table class="table-bordered md-padding">
            <tr>
                <th class="text-center">consumerGroup</th>
                <th class="text-center">trackType</th>
                <!--<th class="text-center">exceptionDesc</th>-->
                <th class="text-center">操作</th>
            </tr>
            <tr ng-repeat="item in ngDialogData.messageTrackList">
                <td class="text-center">{{item.consumerGroup}}</td>
                <td class="text-center">{{item.trackType}}</td>
                <td class="text-center">
                    <button class="btn btn-sm btn-primary" type="button"
                            ng-click="resendMessage(ngDialogData.messageView.msgId,item.consumerGroup)">
                        重发消息
                    </button>
                    <button class="btn btn-sm btn-primary" type="button"
                            ng-click="showExceptionDesc(item.exceptionDesc)">
                        查看异常
                    </button>
                </td>
            </tr>
        </table>
    </md-content>
    <div class="ngdialog-buttons">
        <button type="button" class="ngdialog-button ngdialog-button-secondary"
                ng-click="closeThisDialog('Cancel')">关闭
        </button>
    </div>
</script>
</html>

